<template>
    <div class="product-group">
        <div class="header">
            <el-form label-width="110px" class="flex-box">
                <el-form-item label="基金编号(简称):" class="width-22">
                    <el-input
                        v-model="searchParams.fundCode"
                        clearable
                        placeholder="账户组分类编号/名称"
                        style="width: 240px"
                        @keyup.enter.native="search"
                        size="mini"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="产品类型：" class="width-22">
                    <el-select v-model="searchParams.sourceType" size="mini">
                        <el-option
                            v-for="item in fundTypeList"
                            :key="item.dictKey"
                            :value="item.dictKey"
                            :label="item.dictKey + ' ' + item.dictKeyName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品组：" class="width-22">
                    <el-select v-model="selectedFundGroupList" size="mini" multiple collapse-tags value-key="fundGroupCode" @change="showList">
                        <el-option
                            v-for="item in fundGroupList"
                            :key="item.fundGroupCode"
                            :label="item.fundGroupCode + ' ' + item.fundGroupName"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" label-width="10px" class="width-12">
                    <el-checkbox v-model="searchParams.showPending_" label="showPending_" @change="handleBtn('showPending_')"
                        >只展示产品所在分组</el-checkbox
                    >
                </el-form-item>
                <el-form-item label="" label-width="0px" class="width-22">
                    <el-button type="primary" size="mini" @click="search">查询</el-button>
                    <el-button type="primary" size="mini" @click="exportBtn">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <RiskGridPlus
                ref="risk-grid"
                :tableConfig="tableConfig"
                :tableData="tableData"
                :column="tableColumns"
                :paging="paging"
                v-loading="tableLoading"
                :searchParams="searchParams"
                @page-change="getTableData"
                :key="tableKey + 'tableKey'"
            >
                <template #fundGroup>
                    产品组：
                    <el-select v-model="showFundGroupParams" size="mini" style="width: 200px" multiple value-key="fundGroupCode" collapse-tags>
                        <el-option
                            v-for="item in secondFundGroupList"
                            :key="item.fundGroupCode"
                            :label="item.fundGroupCode + ' ' + item.fundGroupName"
                            :value="item"
                        ></el-option>
                    </el-select>
                </template>
                <template #fundNameSt>
                    {{ '展示的产品简称' }}
                </template>
            </RiskGridPlus>
        </div>

        <!-- 导出 -->
        <el-dialog title="导出" :visible.sync="exportVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
            文件名：<el-input v-model="exportName" size="mini"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="exportVisible = false">取 消</el-button>
                <el-button type="primary" @click="exportDialogBtn()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import RiskGridPlus from '@/common/components/risk-grid-plus.vue';
import RiskPagination from '@/common/components/risk-pagination.vue';
import RiskTablePlus from '@/common/components/risk-table-plus.vue';
import { PageVO, TableConfigVO } from '@/common/vo';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { downLoadFile } from '@/utils/request';
import { Vue, Component, Watch } from 'vue-property-decorator';
import Dict from '../dict/index';

@Component({
    name: 'ProductGroup',
    components: {
        RiskTablePlus,
        RiskPagination,
        RiskGridPlus,
    },
})
export default class ProductGroup extends Vue {
    Dict = new Dict();

    private fundTypeList: any = [];
    options = [];
    searchParams: any = {
        fundCode: '',
        sourceType: '',
        fundGroupCode: [],
        showPending_: false,
    };
    showFundGroupParams: any = [];
    paging: PageVO = { currentPage: 1, pageSize: 25, total: 0 };

    tableData: any[] = [
        {
            fundCode: '122',
            fundNameSt: '产品简称',
            fundType: '1',
        },
    ];

    tableConfig: TableConfigVO = {
        rowKey: 'fundCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableKey: number = 0;
    tableLoading: boolean = false;
    tableColumns = [];
    exportVisible: boolean = false;
    exportName: string = '';
    async created() {
        this.fundTypeList = await SGU_CACHE('FundType', '/dict/list/code/Y_000002', []);
        this.tableColumns = [
            {
                field: 'fundInfo',
                title: '产品信息',
                align: 'left',
                minWidth: '120px',
                children: [
                    {
                        title: '产品编号',
                        field: 'fundCode',
                        sortable: true,
                        minWidth: '100px',
                        filterType: 'search',
                        filters: [{ data: '' }],
                        slots: { default: 'default', filter: 'filter' },
                    },
                    {
                        title: '产品简称',
                        field: 'fundNameSt',
                        sortable: true,
                        minWidth: '100px',
                        filterType: 'search',
                        filters: [{ data: '' }],
                        slots: { default: 'default', filter: 'filter' },
                    },
                    {
                        title: '产品类型',
                        field: 'fundType',
                        sortable: true,
                        minWidth: '100px',
                        align: 'center',
                        contentRender: value => this.fundTypeList.find(item => item.dictKey == value)?.dictKeyName,
                        filterType: 'funnel',
                        filters: this.fundTypeList.map(item => {
                            return { value: item.dictKey, label: item.dictKeyName };
                        }),
                        slots: { default: 'default' },
                    },
                    {
                        title: '产品成立日期',
                        field: 'openDate',
                        sortable: true,
                        minWidth: '120px',
                    },
                    {
                        title: '产品到期日',
                        field: 'contractEndDate',
                        sortable: true,
                        minWidth: '120px',
                    },
                    {
                        title: '产品所属期',
                        field: 'period',
                        sortable: true,
                        minWidth: '120px',
                        render: value => this.Dict.FundPeriod[value],
                        filterType: 'funnel',
                        filters: DictionConstUtil.PojoToList3(this.Dict.FundPeriod),
                    },
                    {
                        title: '开放日',
                        field: 'startDate_',
                        sortable: true,
                        minWidth: '120px',
                    },
                    {
                        title: '结束日',
                        field: 'endDate_',
                        sortable: true,
                        minWidth: '120px',
                    },
                    {
                        title: '下一开放日',
                        field: 'nextStartDate_',
                        sortable: true,
                        minWidth: '120px',
                    },
                ],
            },
            {
                title: '产品组',
                field: 'fundGroup',
                align: 'left',
                slots: { header: 'default' },
                showHeaderOverflow: false,
                minWidth: '200px',
                children: [
                    {
                        title: '公募基金',
                        field: 'fundCode1',
                        minWidth: '100px',
                    },
                    {
                        title: '母公司单一私募专户',
                        field: 'fundCode2',
                        minWidth: '100px',
                    },
                ],
            },
        ];
    }
    fundGroupList: any = []; // 产品组
    selectedFundGroupList: any = []; // 勾选的产品组
    secondFundGroupList: any = []; // 展示的产品组
    mounted() {
        this.$axios.post('/fundGroup/list?filterNoImportType=false').then((res: any) => {
            this.fundGroupList = res;
            this.secondFundGroupList = JSON.parse(JSON.stringify(this.fundGroupList));
        });
        this.getTableData();
    }

    // 表格数据
    getTableData() {
        this.tableLoading = true;
        this.searchParams.fundGroupCode = this.selectedFundGroupList.map(item => item.fundGroupCode);
        this.secondFundGroupList = this.selectedFundGroupList;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('todo', { ...this.searchParams, paging: this.paging })
                .then((res: any) => {
                    this.tableData = res.list;
                    this.paging.total = res.total;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        });
    }

    // 查询
    search() {
        this.getTableData();
    }

    // 导出
    exportBtn() {
        this.exportVisible = true;
    }

    /**
     * 导出确认
     */
    async exportDialogBtn() {
        let checkRowKeys = (this.$refs['risk-table'] as any).checkRowKeys || [];
        downLoadFile({
            url: '/card/export',
            method: 'post',
            data: { ...this.searchParams, checkRowKeys, exportName: this.exportName },
        });
        this.exportVisible = false;
    }

    showList() {
        console.log(this.selectedFundGroupList, 'wwwwwwww');
    }

    @Watch('showFundGroupParams', { deep: true })
    changeShowGroupParams() {
        let data = this.showFundGroupParams;
        if (this.showFundGroupParams.length == 0) {
            data = this.fundGroupList;
        }
        this.tableColumns[1].children = data.map(item => {
            return { field: item.fundGroupCode, title: item.fundGroupName, minWidth: '100px' };
        });
        this.tableKey++;
        console.log(this.tableColumns, 'this.tableColumns');
    }
}
</script>
<style lang="scss" scoped>
.product-group {
    .header {
        padding: 6px;
        border: 1px solid #ccc;
    }
    .table {
        width: 100%;
        height: calc(100vh - 170px);
        margin-top: 10px;
        // h3 {
        //     padding: 0 10px;
        //     border: 1px solid #ccc;
        //     border-bottom: none;
        //     height: 35px;
        //     line-height: 35px;
        //     color: #333;
        // }
        // .table-content {
        //     height: calc(100% - 35px) !important;
        // }
        // & > div:first-child {
        //     height: 100%;
        //     width: 60%;
        //     display: inline-block;
        // }
        // & > div:last-child {
        //     height: 100%;
        //     width: 40%;
        //     display: inline-block;
        // }
    }
}
/deep/ .el-form .el-form-item__label {
    color: #333;
}
/deep/ .vxe-header--row:first-child th {
    background-color: #fff;
}
/deep/ .vxe-table .el-input__inner {
    height: 28px !important;
    line-height: 28px !important;
}
</style>
